<template>
	<view class="container">
		<view class="map-container">
			<map id="myMap" :show-location="showLocation" :longitude="orderInfo.receiverLongitude"
				:latitude="orderInfo.receiverLatitude" :scale="scale" :markers="markers" :enable-3D="enable3D"
				:show-compass="showcompass" :enable-building="enablebuilding" :enable-overlooking="true"
				:enable-poi="true" style="width:100%; height: 300px;">
			</map>
		</view>
		<scroll-view class="scroll-content" scroll-y>
			<!-- 订单基本信息 -->
			<view class="order-info">
				<view class="order-header"
					v-if="orderInfo.orderStatus == 1 || orderInfo.orderStatus == 2 || orderInfo.orderStatus == 3 || orderInfo.orderStatus == 4">
					<view class="left">
						{{orderInfo.id}}
					</view>
					<view class="right">
						<text class="order-time">预计{{ orderInfo.expectEndTime }}
							<text style="color: #333;">前送达</text>
						</text>
						<view class="order-number">
							<text v-if="orderInfo.orderType == 1">立即送达，
								<text style="color: #4e68ff;">{{orderInfo.timeDifference }}</text>
								前下单</text>
							<text v-if="orderInfo.orderType == 2">预约单，
								<text style="color: #4e68ff;">{{orderInfo.timeDifference }}</text>
								前下单</text>
						</view>
						<view class="store-name">
							<uni-icons type="shop"></uni-icons>
							<text>{{orderInfo.shopName}}</text>
						</view>
					</view>
				</view>
				<view class="" v-if="orderInfo.orderStatus == 7">
					<view class="title">订单已完成</view>
					<view class="sub-title">感谢您对食速达的信任，期待再次光临。</view>
				</view>
				<view class="" v-if="orderInfo.orderStatus == 8">
					<view class="title">订单已取消</view>
					<view class="sub-title">感谢您对食速达的信任，期待再次光临。</view>
				</view>
				<view class="" v-if="orderInfo.orderStatus == 5">
					<view class="title">订单配送异常</view>
					<view class="sub-title">请联系骑手和顾客确认配送状态。</view>
				</view>
				<view class="" v-if="orderInfo.orderStatus == 2">
					<view class="title">骑手待接单</view>
					<view class="sub-title">请联系骑手和顾客确认配送状态。</view>
				</view>
				<view class="" v-if="orderInfo.orderStatus == 6">
					<view class="title">退款申请中</view>
					<view class="sub-title">请同意/拒绝此订单的退款请求。</view>
				</view>
				<view class="line"></view>
				<view class="order-actions">
					<view class="action-item" @tap="doOrderPrinter(orderInfo.id)">
						<image :src="$imgUrl + '/static/print-icon.png'" mode="aspectFit"></image>
						<text>打印小票</text>
					</view>
					<!-- 	<view class="action-item" @tap="doDelivery(orderInfo.id)">
						<image :src="$imgUrl + '/static/delivery-icon.png'" mode="aspectFit"></image>
						<text
							v-if="orderInfo.order_status.sendStatus == 20 || orderInfo.order_status.sendStatus == 30 ||orderInfo.order_status.sendStatus == 40">配送下单</text>
						<text v-else>再次配送</text>
					</view> -->
					<view class="action-item" @tap="openMap">
						<image :src="$imgUrl + '/static/navigation-icon.png'" mode="aspectFit"></image>
						<text>地图导航</text>
					</view>
					<!-- <view class="action-item">
						<image :src="$imgUrl + '/static/edit-icon.png'" mode="aspectFit"></image>
						<text>订单修改</text>
					</view> -->
					<!-- <view class="action-item">
						<image :src="$imgUrl + '/static/more-icon.png'" mode="aspectFit"></image>
						<text>更多操作</text>
					</view> -->
				</view>
			</view>
			<!-- 收货信息 -->
			<view class="receipt-info">
				<view class="receipt-header">
					<text>{{orderInfo.receiverName}} {{orderInfo.receiverPhone}}</text>
					<view class="phoneBox" @tap="callPhone(orderInfo.receiverPhone)">
						<uni-icons type="phone-filled" color="#4b6fff" size="22"></uni-icons>
					</view>
				</view>
				<view class="receipt-address">
					<uni-icons type="location-filled" color="#ADBFE5"></uni-icons>
					<text>{{orderInfo.receiverAddress}}{{orderInfo.receiverAddressDetail}}</text>
				</view>
				<view class="product-info" v-for="item in orderInfo.product_list" :key="item.id">
					<view class="product-image">
						<image :src="item.picture" mode="aspectFit"></image>
					</view>
					<view class="product-details">
						<text>{{item.name}}</text>
						<view class="product-price">
							<text style="margin-right: 30rpx;">{{item.count}}{{item.unit}}</text>
							<text>￥{{item.price / 100}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单收入信息 -->
			<view class="order-income">
				<view class="income-item">
					<text>订单原价</text>
					<text>{{orderInfo.originalAmount / 100}}元</text>
				</view>
				<view class="income-item">
					<text>顾客实付</text>
					<text>{{orderInfo.payAmount / 100}}元</text>
				</view>
				<view class="income-item">
					<text>商家实收</text>
					<text>{{orderInfo.shopActualAmount /100}}元</text>
				</view>
				<view class="income-item">
					<text>配送费</text>
					<text>{{orderInfo.order_status && orderInfo.order_status.discountLastMoney? (orderInfo.order_status.discountLastMoney / 100) + '元' : '0元'}}</text>
				</view>
			</view>
			<!-- 配送信息 -->
			<view class="delivery-info">
				<view class="delivery-item">
					<text>品类</text>
					<text>餐饮</text>
				</view>
				<view class="delivery-item">
					<text>备注</text>
					<text>{{orderInfo.orderRemark}}</text>
				</view>
				<view class="delivery-item">
					<text>重量</text>
					<text>{{orderInfo.weight}}kg</text>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order-details">
				<view class="detail-item">
					<text>期望送达</text>
					<text>预计{{orderInfo.expectEndTime}}前送达</text>
				</view>
				<view class="detail-item">
					<text>订单编号</text>
					<view style="display: flex;align-items: center;">
						<text style="margin-right: 30rpx;">{{orderInfo.orderId}}</text>
						<button size="mini" type="default" plain @click="copyOrderNumber(orderInfo.orderId)">复制</button>
					</view>
				</view>
				<view class="detail-item">
					<text>下单时间</text>
					<text>{{orderInfo.orderCreateTimeFormatted}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		orderPrinter,
		deliveryOrder
	} from "@/api/orderApi/order.js"
	export default {
		data() {
			return {
				showLocation: false,
				scale: 14,
				enable3D: true,
				showcompass: true,
				enablebuilding: true,
				orderInfo: {},
				markers: [{
						// 顾客位置
						id: 0,
						latitude: null,
						longitude: null,
						iconPath: '/static/gukeweizhi.png',
						title: "",
						callout: {
							content: "",
							borderRadius: 30,
							padding: 5,
							display: 'ALWAYS'
						},
						width: 30,
						height: 40
					},
					// 骑手位置
					// {
					// 	id: 1,
					// 	latitude: null,
					// 	longitude: null,
					// 	iconPath: '/static/index.png',
					// 	width: 30,
					// 	height: 30
					// },
					// 门店位置
					{
						id: 1,
						latitude: null,
						longitude: null,
						iconPath: '/static/mendianweizhi.png',
						title: "",
						callout: {
							content: "",
							borderRadius: 30,
							padding: 5,
							display: 'ALWAYS'
						},
						width: 30,
						height: 40
					}
				]
			};
		},
		methods: {
			copyOrderNumber(id) {
				// 复制
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'none'
						});
					}
				});
			},
			// 订单详情
			getOrderDetail(id) {
				getOrderDetail({
					id: id
				}).then(res => {
					if (res.code == 200) {
						res.data.expectEndTime = Number(res.data.expectEndTime);

						function formatTimestamp(timestamp) {
							const date = new Date(parseInt(timestamp));
							const year = date.getFullYear();
							const month = String(date.getMonth() + 1).padStart(2, '0');
							const day = String(date.getDate()).padStart(2, '0');
							const hours = String(date.getHours()).padStart(2, '0');
							const minutes = String(date.getMinutes()).padStart(2, '0');
							const seconds = String(date.getSeconds()).padStart(2, '0');
							return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
						}
						res.data.expectEndTime = formatTimestamp(res.data.expectEndTime);

						res.data.orderCreateTime = Number(res.data.orderCreateTime);
						res.data.orderCreateTimeFormatted = formatTimestamp(res.data.orderCreateTime);
						res.data.timeDifference = calculateTimeDifference(res.data.orderCreateTime);

						function calculateTimeDifference(timestamp) {
							const now = new Date().getTime();
							const date = new Date(parseInt(timestamp));
							const diff = now - date.getTime();

							const minutes = Math.floor(diff / (1000 * 60));
							const hours = Math.floor(diff / (1000 * 60 * 60));
							const days = Math.floor(diff / (1000 * 60 * 60 * 24));

							if (minutes < 60) {
								return `${minutes}分钟`;
							} else if (hours < 24) {
								return `${hours}小时`;
							} else {
								return `${days}天`;
							}
						}
						this.orderInfo = res.data;
						this.markers[0].latitude = res.data.receiverLatitude
						this.markers[0].longitude = res.data.receiverLongitude
						this.markers[0].callout.content = res.data.receiverDistrict + res.data.receiverName

						this.markers[1].latitude = res.data.shop.lat
						this.markers[1].longitude = res.data.shop.lng
						this.markers[1].callout.content = res.data.shop.store_name
					}
				})
			},
			callPhone(number) {
				uni.makePhoneCall({
					phoneNumber: number,
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			// 打印小票
			doOrderPrinter(id) {
				orderPrinter({
					id: id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: "success",
							title: "打印成功"
						})
					}
				})
			},
			openMap() {
				uni.openLocation({
					latitude: Number(this.orderInfo.receiverLatitude),
					longitude: Number(this.orderInfo.receiverLongitude),
					name: this.orderInfo.receiverName,
					address: this.orderInfo.receiverAddress,
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			doDelivery(id) {
				uni.showModal({
					title: '提示',
					content: "确定要配送吗？",
					success: (res) => {
						if (res.confirm) {
							deliveryOrder({
								id: id
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: "none",
										title: "配送下单成功"
									})
									// setTimeout(()=>{
									// 	this.this.getOrderDetail(option.id)
									// },1000)
								}
							})
						}
					}
				})
			}
		},
		onLoad(option) {
			this.getOrderDetail(option.id)
		}
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
		height: 100vh;

		.map-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 300px;
		}

		.scroll-content {
			flex: 1;
			overflow-y: auto;
			padding: 20rpx 0 0 0;
			margin-top: 300px;
			background-color: #f5f5f5;

			.order-info,
			.receipt-info,
			.order-income,
			.delivery-info,
			.order-details {
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;

				.order-header {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.left {
						font-size: 28rpx;
						width: 60rpx;
						height: 60rpx;
						background: #E4E4EB;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 30rpx;
					}

					.right {
						display: flex;
						flex-direction: column;
						align-items: flex-start;

						.order-time {
							font-size: 28rpx;
							color: #3399ff;
						}

						.order-number {
							font-size: 24rpx;
							margin-top: 6rpx;
						}

						.store-name {
							font-size: 24rpx;
							color: #666;
							margin-top: 10rpx;
						}
					}
				}

				.line {
					height: 1rpx;
					background-color: #eee;
					margin-bottom: 20rpx;
				}

				.order-actions {
					display: flex;
					justify-content: space-around;

					.action-item {
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 50rpx;
							height: 50rpx;
							margin-bottom: 10rpx;
						}

						text {
							font-size: 24rpx;
						}
					}
				}

				.receipt-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					text {
						font-size: 24rpx;
					}

					.phoneBox {
						width: 60rpx;
						height: 60rpx;
						background: #E4E4EB;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.receipt-address {
					font-size: 24rpx;
					margin-bottom: 20rpx;

					uni-icons {
						margin-right: 10rpx;
					}
				}

				.product-info {
					display: flex;
					align-items: center;

					.product-image {
						width: 100rpx;
						height: 100rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.product-details {
						flex: 1;

						text {
							font-size: 24rpx;
							margin-bottom: 10rpx;
						}

						.product-price {
							display: flex;
							justify-content: flex-end;

							text {
								font-size: 24rpx;
							}
						}
					}
				}

				.income-item,
				.delivery-item,
				.detail-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;

					text {
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

				.button {
					font-size: 20rpx;
				}
			}
		}
	}
</style>